<template>
  <div class="home">
    <button @click="linkTo('htmlImg')">htmlImg海报生成</button>
    <button @click="linkTo('echarts')">echart</button>
    <button @click="linkTo('nine')">nine</button>
    <button @click="linkTo('tanchuang')">弹窗</button>
    <button @click="linkTo('upload')">上传</button>
    <button @click="linkTo('atable')">table拖拽</button>
    <button @click="linkTo('reactive')">reactive绑定传递</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  name: 'Home',
  setup() {
    let router = useRouter();
    const linkTo = (url) => {
      router.push(url);
    };
    let v1 = {
      name: 'xxx'
    };
    let v2 = {
      name: 'bbb'
    };
    let v3 = {
      name: 'aaa'
    };

    function f(val) {
      console.log(this.name, val);
      // console.log(arguments);  可以查看传进来的参数
    }

    f.call(v1, 'v1'); // 输出 xxx  v1
    f.apply(v2, ['v2']); // 输出 bbb  v2
    f.bind(v3, 'v3'); // 没有输出

    var s = f.bind(v3, 'v3');
    // try {
    //   console.log(a);
    // } catch {
    //   console.log(23);
    // }
    s('4'); // 输出 aaa  v3
    return {
      linkTo
    };
  }
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  button {
    margin: 20px;
    // width: 100px;
  }
}
</style>
